<template>
	<Layout :class="'bg-white p-2'">
		<Row :class="'m-1'">
 			  
		 
			        <Col span="4">
						<Input :class="'w-75 m-2'" v-model="searchPrice" placeholder="请输入检索课程价格" />
					</Col>
			       <Col span="4">
			       	<Input :class="'w-75 m-2'" v-model="searchName" placeholder="请输入检索课程名称" />
			       </Col>
				   <Col span="4">
				   	<Input :class="'w-75 m-2'" v-model="searchTypeId" placeholder="请输入检索课程类型ID" />
				   </Col>
					 <Col span="4">
					 	<Button class="m-2" type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>
					 </Col>
		</Row>
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.courseId)">详细</Button>
<!-- 					<Button type="error" size="small" @click="remove(row.courseId)">删除</Button> -->
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch" :total="tableInfo.total" />
		</Layout>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				searchNum: "",
				searchName: "",
				searchTypeId: "",
				tableInfo: {
					currentPage: 1,
					total: 0,
					columnInfo: [
						{
							title: "课程编号",
							key: "courseId",
							width: 170
						},
						{
							title: "课程名称",
							key: "name",
							width: 300
						},
						{
							title: "时长",
							key: "longs",
							width: 250
						},
						{
							title: "价格",
							key: "price",
							width: 250
						},
						{
							title: "描述",
							key: "des",
							width: 300
						},
						{
							title: "课程类型ID",
							key: "typeId",
							width: 150
						},
						// {
						// 	title: "状态",
						// 	key: "activeFlg",
						// 	width: 200
						// },
						// {
						// 	title: "删除位",
						// 	key: "delFlg",
						// 	width: 200
						// },
						{
							title: "人数上限",
							key: "count",
							width: 150,
							},
						// },
						{
							title: "操作",
							slot: 'action',
							width: 200
						}
					],
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.$data.tableInfo.currentPage = 0;
				this.search();
			},
			newCourse: function() {
				this.$router.push({
					name: "course_new"
				});
			},
			show: function(courseId) {
				this.$router.push({
					name: "course_detail",
					params: {
						courseId
					}
				});
			},
			update(courseId){
				this.$router.push({
					name: "course_update",
					params: {
						courseId
					}
				});
			},
			remove: function(courseId) {
				
				this.message.confirm({
					title: "删除提示",
					content: "即将删除用户，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/course/info",
							param: {
								courseId
							}
						}).then(data => {
							
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			search: function() {
				this.http.get({
					url: "/course/list",
					param: {
						currentPage: this.$data.tableInfo.currentPage,
						price: this.$data.searchPrice,
						name: this.$data.searchName,
						typeId:this.$data.searchTypeId
						
					}
				}).then(data => {
					this.$data.tableInfo.currentPage = data.current;
					this.$data.tableInfo.total = data.total;
					this.$data.tableInfo.pageSize = data.size;
					this.$data.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				this.$data.tableInfo.currentPage = changedPage;
				this.search();
			}
		},
		created: function() {
			this.init();
		}
		
	}
</script>

<style>
	
</style>
